{% extends "base.html" %}

{% block title %}{{ activity.title }} - 万岛潜水{% endblock %}

{% block content %}
<div class="container py-5">
    <div class="row">
        <div class="col-lg-8">
            <!-- 活动图片 -->
            <div class="mb-4">
                {% if activity.image %}
                <img src="{{ url_for('static', filename='uploads/' + activity.image) }}" alt="{{ activity.title }}" class="img-fluid rounded">
                {% else %}
                <img src="{{ url_for('static', filename='img/default-activity.jpg') }}" alt="{{ activity.title }}" class="img-fluid rounded">
                {% endif %}
            </div>
            
            <!-- 活动详情 -->
            <div class="card mb-4">
                <div class="card-body">
                    <h1 class="card-title">{{ activity.title }}</h1>
                    <p class="text-muted">
                        <i class="fas fa-calendar-alt me-2"></i>{{ activity.date.strftime('%Y-%m-%d') }}
                    </p>
                    
                    <div class="mb-4">
                        <h5>活动介绍</h5>
                        <p>{{ activity.description|safe }}</p>
                    </div>
                    
                    <!-- 修改这里，检查highlights属性是否存在 -->
                    {% if activity.highlights %}
                    <div class="mb-4">
                        <h5>活动亮点</h5>
                        <ul class="list-group list-group-flush">
                            {% for highlight in activity.highlights.split('\n') %}
                                <li class="list-group-item"><i class="fas fa-check-circle text-success me-2"></i>{{ highlight }}</li>
                            {% endfor %}
                        </ul>
                    </div>
                    {% endif %}
                    
                    <div class="mb-4">
                        <h5>活动地点</h5>
                        <p>
                            <i class="fas fa-map-marker-alt me-2 text-danger"></i>
                            {% if activity.location is defined and activity.location %}
                                {{ activity.location }}
                            {% else %}
                                待定
                            {% endif %}
                        </p>
                    </div>
                    
                    <div class="mb-4">
                        <h5>活动费用</h5>
                        <p class="fs-4 text-primary">
                            {% if activity.price is defined and activity.price is not none %}
                                ¥{{ activity.price }}
                            {% else %}
                                免费
                            {% endif %}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-lg-4">
            <!-- 报名表单 -->
            <div class="card sticky-top" style="top: 20px;">
                <div class="card-header bg-primary text-white">
                    <h5 class="mb-0">活动报名</h5>
                </div>
                <div class="card-body">
                    <form method="post" action="{{ url_for('main.activity_signup', id=activity.id) }}">
                        <div class="mb-3">
                            <label for="name" class="form-label">姓名</label>
                            <input type="text" class="form-control" id="name" name="name" required>
                        </div>
                        <div class="mb-3">
                            <label for="phone" class="form-label">手机号码</label>
                            <input type="tel" class="form-control" id="phone" name="phone" required>
                        </div>
                        <div class="mb-3">
                            <label for="email" class="form-label">电子邮箱</label>
                            <input type="email" class="form-control" id="email" name="email">
                        </div>
                        <div class="mb-3">
                            <label for="participants" class="form-label">参与人数</label>
                            <select class="form-select" id="participants" name="participants">
                                {% for i in range(1, 11) %}
                                <option value="{{ i }}">{{ i }}人</option>
                                {% endfor %}
                            </select>
                        </div>
                        <div class="mb-3">
                            <label for="message" class="form-label">留言</label>
                            <textarea class="form-control" id="message" name="message" rows="3"></textarea>
                        </div>
                        <button type="submit" class="btn btn-primary w-100">立即报名</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 相关活动 -->
    <div class="row mt-5">
        <div class="col-12">
            <h3 class="mb-4">相关活动推荐</h3>
        </div>
        
        {% for related_activity in related_activities %}
        <div class="col-md-4 mb-4">
            <div class="card h-100">
                <img src="{{ url_for('static', filename='uploads/' + related_activity.image) if related_activity.image else url_for('static', filename='img/default-activity.jpg') }}" class="card-img-top" alt="{{ related_activity.title }}">
                <div class="card-body">
                    <h5 class="card-title">{{ related_activity.title }}</h5>
                    <p class="card-text text-muted"><i class="fas fa-calendar-alt me-2"></i>{{ related_activity.date.strftime('%Y-%m-%d') }}</p>
                    <p class="card-text">{{ related_activity.description|truncate(100) }}</p>
                </div>
                <div class="card-footer bg-white">
                    <a href="{{ url_for('main.activity_detail', id=related_activity.id) }}" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
{% endblock %} 